<template>
    <div class="home-page absolute w100 h100">
        <el-container style="height: 100%; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-scrollbar style="height: 100%;">
                    <el-menu class="el-menu-vertical-demo" :default-active="isActive" :collapse="isCollapse"
                             unique-opened>
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-menu"></i>收藏</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" @click="routerLink('收藏','1-1')">website</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-star-on"></i>js</template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1" @click="routerLink('js基础','2-1')">js基础</el-menu-item>
                                <el-menu-item index="2-2" @click="routerLink('正则表达式','2-2')">正则表达式</el-menu-item>
                                <el-submenu index="2-3">
                                    <template slot="title">数据处理</template>
                                    <el-menu-item index="2-3-1" @click="routerLink('Array','2-3-1')">Array
                                    </el-menu-item>
                                    <el-menu-item index="2-3-2" @click="routerLink('Json','2-3-2')">Json</el-menu-item>
                                </el-submenu>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-bell"></i>Vue</template>
                            <el-menu-item-group>
                                <el-menu-item index="3-1" @click="routerLink('开发规范','3-1')">开发规范</el-menu-item>
                                <el-menu-item index="3-2" @click="routerLink('常用语法','3-2')">常用语法</el-menu-item>
                                <el-menu-item index="3-3" @click="routerLink('路由相关','3-3')">路由相关</el-menu-item>
                                <el-menu-item index="3-4" @click="routerLink('vuex','3-4')">Vuex</el-menu-item>
                                <el-submenu index="3-5">
                                    <template slot="title">其他配置</template>
                                    <el-menu-item index="3-5-1" @click="routerLink('scss','3-5-1')">scss</el-menu-item>
                                    <el-menu-item index="3-5-2" @click="routerLink('axios','3-5-2')">axios
                                    </el-menu-item>
                                    <el-menu-item index="3-5-3" @click="routerLink('webpack','3-5-3')">webpack
                                    </el-menu-item>
                                    <el-menu-item index="3-5-4" @click="routerLink('esLint','3-5-4')">esLint
                                    </el-menu-item>
                                    <el-menu-item index="3-5-5" @click="routerLink('Git','3-5-5')">Git</el-menu-item>
                                    <el-menu-item index="3-5-6" @click="routerLink('vue.config.js','3-5-6')">
                                        vue.config.js
                                    </el-menu-item>
                                    <el-menu-item index="3-5-7" @click="routerLink('vw配置','3-5-7')">vw配置</el-menu-item>
                                    <el-menu-item index="3-5-8" @click="routerLink('rem配置','3-5-8')">rem配置
                                    </el-menu-item>
                                    <el-menu-item index="3-5-9" @click="routerLink('i18n国际化','3-5-9')">i18n国际化
                                    </el-menu-item>
                                </el-submenu>
                                <el-submenu index="3-6">
                                    <template slot="title">组件库</template>
                                    <el-submenu index="3-6-1">
                                        <template slot="title">富文本编辑器</template>
                                        <el-menu-item index="3-6-1-1" @click="routerLink('wangEditor','3-6-1-1')">
                                            wangEditor
                                        </el-menu-item>
                                        <el-menu-item index="3-6-1-2" @click="routerLink('vue-quill-editor','3-6-1-2')">
                                            vue-quill-editor
                                        </el-menu-item>
                                    </el-submenu>
                                    <el-menu-item index="3-6-2" @click="routerLink('图片裁剪','3-6-2')">图片裁剪</el-menu-item>
                                    <el-menu-item index="3-6-3" @click="routerLink('音乐播放器','3-6-3')">音乐播放器
                                    </el-menu-item>
                                    <el-menu-item index="3-6-4" @click="routerLink('视频播放器','3-6-4')">视频播放器
                                    </el-menu-item>
                                    <el-submenu index="3-6-5">
                                        <template slot="title">div拖拽</template>
                                        <el-menu-item index="3-6-5-1" @click="routerLink('vue-dragdrag','3-6-5-1')">
                                            vue-dragdrag
                                        </el-menu-item>
                                        <el-menu-item index="3-6-5-2" @click="routerLink('vue-power-drag','3-6-5-2')">
                                            vue-power-drag
                                        </el-menu-item>
                                        <el-menu-item index="3-6-5-3" @click="routerLink('vue-drr','3-6-5-3')">vue-drr
                                        </el-menu-item>
                                        <el-menu-item index="3-6-5-4" @click="routerLink('Vue.Draggable','3-6-5-4')">
                                            Vue.Draggable
                                        </el-menu-item>
                                    </el-submenu>
                                    <el-menu-item index="3-6-6" @click="routerLink('高德地图','3-6-6')">高德地图</el-menu-item>
                                    <el-menu-item index="3-6-7" @click="routerLink('登录验证码','3-6-7')">登录验证码
                                    </el-menu-item>
                                    <el-menu-item index="3-6-8" @click="routerLink('跳动数字','3-6-8')">跳动数字</el-menu-item>
                                    <el-menu-item index="3-6-9" @click="routerLink('pdf在线预览','3-6-9')">pdf在线预览
                                    </el-menu-item>
                                    <el-menu-item index="3-6-10" @click="routerLink('swiper','3-6-10')">swiper
                                    </el-menu-item>
                                    <el-menu-item index="3-6-11" @click="routerLink('html2canvas','3-6-11')">
                                        html2canvas
                                    </el-menu-item>
                                    <el-menu-item index="3-6-12" @click="routerLink('图片懒加载','3-6-12')">图片懒加载
                                    </el-menu-item>
                                    <el-menu-item index="3-6-13" @click="routerLink('画板','3-6-13')">Signature Pad
                                    </el-menu-item>
                                </el-submenu>
                                <el-menu-item index="3-7" @click="routerLink('npm/yarn','3-7')">npm/yarn</el-menu-item>
                                <el-submenu index="3-8">
                                    <template slot="title">skeleton骨架屏</template>
                                    <el-menu-item index="3-8-1" @click="routerLink('skeleton骨架屏','3-8-1')">配置项
                                    </el-menu-item>
                                    <el-submenu index="3-8-2">
                                        <template slot="title">对应文件</template>
                                        <el-menu-item class="inline-block ellipsis" index="3-8-2-1"
                                                      @click="routerLink('webpack.skeleton.conf.js','3-8-2-1')">
                                            webpack.skeleton.conf.js
                                        </el-menu-item>
                                        <el-menu-item index="3-8-2-2" @click="routerLink('Skeleton.vue','3-8-2-2')">
                                            Skeleton.vue
                                        </el-menu-item>
                                        <el-menu-item index="3-8-2-3"
                                                      @click="routerLink('entry-skeleton.js','3-8-2-3')">
                                            entry-skeleton.js
                                        </el-menu-item>
                                    </el-submenu>
                                </el-submenu>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title"><i class="el-icon-picture"></i>D3.js</template>
                            <el-menu-item-group>
                                <el-menu-item index="4-1" @click="routerLink('svg','4-1')">svg</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title"><i class="el-icon-upload"></i>Http</template>
                            <el-menu-item-group>
                                <el-menu-item index="5-1" @click="routerLink('HTTP状态码','5-1')">HTTP状态码</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="6">
                            <template slot="title"><i class="el-icon-news"></i>nodeJs</template>
                            <el-menu-item-group>
                                <el-menu-item index="6-1" @click="routerLink('...','6-1')">...</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="7">
                            <template slot="title"><i class="el-icon-menu"></i>CSS</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" @click="routerLink('CSS基础','1-1')">CSS基础</el-menu-item>
                                <el-menu-item index="1-2" @click="routerLink('CSS初始化','1-2')">CSS初始化</el-menu-item>
                                <el-menu-item index="1-3" @click="routerLink('flex布局','1-3')">flex布局</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-scrollbar>
            </el-aside>

            <el-container>
                <el-header class="fs16 text-right">
                    <el-popover
                            placement="top"
                            width="160"
                            v-model="visible2">
                        <p>退出当前用户？</p>
                        <div class="text-right mb0 mt5">
                            <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                            <el-button type="primary" size="mini" @click="onExit">确定</el-button>
                        </div>
                        <i class="iconfont icon-tuichu pull-left pointer" slot="reference"></i>
                    </el-popover>
                    <span>{{title}}</span>
                </el-header>
                <el-main class="relative border-box overflow-hidden">
                    <transition name="custom-classes-transition" enter-active-class="animated lightSpeedIn">
                        <router-view class="center-body absolute border-box"></router-view>
                    </transition>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'HomePage',
        data() {
            return {
                isCollapse: false,
                visible2: false
            }
        },
        methods: {
            //  菜单跳转
            routerLink(link, isActive) {
                this.$store.commit('onTitle', link)
                this.$store.commit('onActive', isActive)
                switch (link) {
                    case '收藏':
                        this.$router.push({
                            name: 'Collect'
                        })
                        break
                    case 'CSS基础':
                        this.$router.push({
                            name: 'CssBasic'
                        })
                        break
                    case 'CSS初始化':
                        this.$router.push({
                            name: 'CssInit'
                        })
                        break
                    case 'flex布局':
                        this.$router.push({
                            name: 'CssFlex'
                        })
                        break
                    case 'js基础':
                        this.$router.push({
                            name: 'JsBasic'
                        })
                        break
                    case '正则表达式':
                        this.$router.push({
                            name: 'RegExp'
                        })
                        break
                    case 'Array':
                        this.$router.push({
                            name: 'ArrayData'
                        })
                        break
                    case 'Json':
                        this.$router.push({
                            name: 'JsonData'
                        })
                        break
                    case '开发规范':
                        this.$router.push({
                            name: 'VueInit'
                        })
                        break
                    case '常用语法':
                        this.$router.push({
                            name: 'VueFunction'
                        })
                        break
                    case '路由相关':
                        this.$router.push({
                            name: 'VueRouter'
                        })
                        break
                    case 'vuex':
                        this.$router.push({
                            name: 'VueStore'
                        })
                        break
                    case 'vue.config.js':
                        this.$router.push({
                            name: 'VueConfig'
                        })
                        break
                    case 'Git':
                        this.$router.push({
                            name: 'GitCode'
                        })
                        break
                    case 'scss':
                        this.$router.push({
                            name: 'VueScss'
                        })
                        break
                    case 'axios':
                        this.$router.push({
                            name: 'VueAxios'
                        })
                        break
                    case 'esLint':
                        this.$router.push({
                            name: 'VueEslint'
                        })
                        break
                    case 'vw配置':
                        this.$router.push({
                            name: 'VueVw'
                        })
                        break
                    case 'rem配置':
                        this.$router.push({
                            name: 'VueRem'
                        })
                        break
                    case 'i18n国际化':
                        this.$router.push({
                            name: 'VueI18n'
                        })
                        break
                    case 'wangEditor':
                        this.$router.push({
                            name: 'WangEditor'
                        })
                        break
                    case 'vue-quill-editor':
                        this.$router.push({
                            name: 'VueQuillEditor'
                        })
                        break
                    case '音乐播放器':
                        this.$router.push({
                            name: 'VueMusic'
                        })
                        break
                    case '视频播放器':
                        this.$router.push({
                            name: 'VueVideo'
                        })
                        break
                    case '图片裁剪':
                        this.$router.push({
                            name: 'VueCroppa'
                        })
                        break
                    case 'swiper':
                        this.$router.push({
                            name: 'VueSwiper'
                        })
                        break
                    case '跳动数字':
                        this.$router.push({
                            name: 'VueCountup'
                        })
                        break
                    case '登录验证码':
                        this.$router.push({
                            name: 'VueVerify'
                        })
                        break
                    case '高德地图':
                        this.$router.push({
                            name: 'VueMap'
                        })
                        break
                    case 'html2canvas':
                        this.$router.push({
                            name: 'Html2Canvas'
                        })
                        break
                    case '图片懒加载':
                        this.$router.push({
                            name: 'VueLazyload'
                        })
                        break
                    case 'vue-dragdrag':
                        this.$router.push({
                            name: 'VueDragdrag'
                        })
                        break
                    case 'vue-power-drag':
                        this.$router.push({
                            name: 'VuePowerDrag'
                        })
                        break
                    case 'vue-drr':
                        this.$router.push({
                            name: 'VueDrr'
                        })
                        break
                    case 'Vue.Draggable':
                        this.$router.push({
                            name: 'DraggableVue'
                        })
                        break
                    case '画板':
                        this.$router.push({
                            name: 'VueSignature'
                        })
                        break
                    case 'npm/yarn':
                        this.$router.push({
                            name: 'NpmYarn'
                        })
                        break
                    case 'skeleton骨架屏':
                        this.$router.push({
                            name: 'VueSkeleton'
                        })
                        break
                    case 'webpack.skeleton.conf.js':
                        this.$router.push({
                            name: 'WebpackSkeleton'
                        })
                        break
                    case 'Skeleton.vue':
                        this.$router.push({
                            name: 'SkeletonFile'
                        })
                        break
                    case 'entry-skeleton.js':
                        this.$router.push({
                            name: 'EntrySkeleton'
                        })
                        break
                    case 'svg':
                        this.$router.push({
                            name: 'VueSvg'
                        })
                        break
                    case 'HTTP状态码':
                        this.$router.push({
                            name: 'HttpCode'
                        })
                        break
                    default:
                        this.$router.push({
                            name: 'HelloWorld'
                        })
                        break
                }
            },
            // 退出
            onExit() {
                this.$store.commit('changeLogin', false)
                this.$router.push({
                    name: 'UserLogin'
                })
            }
        },
        computed: {
            isActive() {
                return this.$store.state.isActive
            },
            title() {
                return this.$store.state.title
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .home-page {
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            height: 45px !important;
            line-height: 45px;
        }
        .el-aside {
            color: #333;
            overflow: hidden;
        }
        .el-main {
            padding: 0 !important;
        }
        .center-body {
            left: 0;
            width: 100%;
            height: 100%;
        }
        .menu-status {
            line-height: 6vw;
        }
        .el-scrollbar__wrap {
            overflow-x: hidden;
        }
    }
</style>
